<template>
  <page-header title="我的发帖" background="#F7F0E6"></page-header>

  <view class="container">
    <post-skeleton v-if="loading"></post-skeleton>
    <block v-for="item in postList" :key="item.postId">
      <view class="post-item" style="margin-top: 40rpx;">
        <view class="top">
          <image class="avatar" :src="item.pic || '../../static/img/avatar.png'" mode="aspectFill"></image>
          <view class="group">
            <view class="nickName">
              {{item.userName}}
            </view>
            <view class="postTime">
              {{String(item.createTime).substring(0,16)}}
            </view>
          </view>
          <image class="cloud" src="../../static/img/new-cloud.png"></image>
        </view>
        <view class="content">
          <view class="text text-overflow-clamp-2" v-html="item.content" style='font-size: 34rpx;'>
          </view>
          <view class="group">
            <image class="img" v-for="(img,index) in item.files" :src="img.fileUrl" mode="aspectFill" :key="img.fileId"
              @tap="preview(index,item.files)"></image>
          </view>
        </view>
        <view class="button">
          <button open-type="share" class="shareButton">
            <image class="icon" src="../../static/img/share.png"></image>
            分享
          </button>
          <view class="group" @tap="handup(item)">
            <image style="width: 45rpx;" class="icon" src="../../static/img/handup.png"></image>
            {{item.like}}
          </view>
        </view>
      </view>
    </block>
    <view v-if="isLoadAll && Data.list.length>0" class="nomore">
      没有更多了，看看别的吧
    </view>
    <empty-img v-if="isEmpty">
      <template #text>
        没有帖子或者帖子未通过审核哦~
      </template>
      <template #button>
        <view @tap="gotoCommunity()">去发帖</view>
      </template>
    </empty-img>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  onShow(() => {
    getList() //获取帖子列表
  })
  const isEmpty = ref(false)
  const loading = ref(true)
  /**
   * 查询条件
   */
  const Data = ref({})
  const postList = ref([])
  const queryData = ref({
    pageSize: 10,
    pageNum: 1,
    columns: "status,sectionId,updateTime",
    orders: "DESC,ASC,DESC",
    title: "",
    sectionId: "",
    status: ""
  })
  /**
   * 获取帖子
   */
  const getList = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/u/post/page',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      if (queryData.value.pageNum === 1) {
        Data.value = res
      } else {
        let list = Data.value.list
        list.push(...res.list)
        Data.value.list = list
      }
      if (queryData.value.pageNum === Data.value.pages) {
        isLoadAll.value = true
      }
      if (res.total == 0) {
        isEmpty.value = true
      } else {
        isEmpty.value = false
      }
      postList.value = Data.value.list
      uni.hideLoading()
    }).catch(() => {
      isEmpty.value = true
      uni.hideLoading()
    }).finally(() => {
      loading.value = false
    })
  }
  /**
   * 页面上拉触底事件的处理函数
   */
  const isLoadAll = ref(false)
  onReachBottom(() => {
    if (queryData.value.pageNum < Data.value.pages) {
      queryData.value.pageNum = queryData.value.pageNum + 1
      getList()
    } else {
      isLoadAll.value = true
    }
  })
  /**
   * 预览图片
   */
  const preview = (index, arr) => {
    let imgArr = arr.map(item => item.fileUrl)
    uni.previewImage({
      urls: imgArr,
      current: index
    })
  }

  /**
   * 去社区
   */
  const gotoCommunity = () => {
    uni.switchTab({
      url: '/pages/activity-community/activity-community'
    })
  }
</script>

<style>
  page {
    background-color: #FFFAF4;
  }
</style>

<style lang="scss">
  .container {
    padding: 0rpx 40rpx;
  }

  .icon {
    width: 40rpx;
    height: 40rpx;
    flex-shrink: 0;
    border-radius: 10rpx;
    margin-right: 10rpx;
  }
</style>
